import { Progress } from 'antd'
import { useContext, useEffect, useState } from 'react'
import '../assets/cpu.css'
import GlobalContext from './GlobalContext'

function Cores(props) {
  const { t } = useContext(GlobalContext)
  const [all, setAll] = useState([])

  useEffect(() => {
    setAll(props.cpus)
  }, [props.cpus])

  return (
    <>
      <div className="cpu-all-title">
        <span className="square"></span>
        <span>{t('coresUsage')}</span>
      </div>
      <div className="cpu-all">
        {all &&
          all.map((item, index) => {
            return (
              <div key={index} className={'core-item'}>
                <span className="core-num">{index + 1}</span>
                <span>[</span>
                <span>
                  <Progress
                    format={(percent) => (
                      <span style={{ color: '#b9c4d1', fontSize: '13px'}}>{percent}%</span>
                    )}
                    percent={item.load}
                    steps={10}
                    size={'small'}
                  />
                </span>
                <span
                  style={{
                    marginLeft: '15px'
                  }}
                >
                  ]
                </span>
              </div>
            )
          })}
      </div>
    </>
  )
}

export default Cores
